<template>
	<view>
		<view class="bg">
			
			<view class="net">
				
				<view class="net-des">
					<view class="net-text">网络信息</view>
					<view class="snum">
						<view class="sn">SN:{{title}}</view>
						<image class="cp" src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/equipment/copy2.png" mode="widthFix" @tap="copySn"></image>
						<view class="sn" >{{remarks.substring(0,8)}}</view>
					</view>
				</view>
				
				<view class="time">
					<view class="time-info">
						<view @tap='selectDate(1)' :class="date == 1?'active':''">今日</view>
						<view @tap='selectDate(2)' :class="date == 2?'active':''">昨日</view>
						<view @tap='selectDate(3)' :class="date == 3?'active':''">本周</view>
						<view @tap='selectDate(4)' :class="date == 4?'active':''">本月</view>
					</view>
					<viw class="time-min">
						<view @tap='selectHour(1)' :class="Hour == 1?'active':''">5m</view>
						<view @tap='selectHour(2)' :class="Hour == 2?'active':''">1h</view>
					</viw>
				</view>
				
				
				<view class="qiun-charts"  v-if="show2">
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
					 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
					<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
				</view>
				
				<view class="qiun-common-mt">
					<view>当前95值：</view>
					<view  v-if="date < 3 && Hour == 1">{{r95}}</view>
				</view>
				
			</view>
			
			<view class="sy-item">
				<view class="sy-t" >
					<view class="sy-text">基础信息</view>
				</view>
				
				<view class="syi-content">
					<view class="syi-con" @tap='comfim3()'>
						<view class="y-time">激活卡</view>
						<view class="y-text">{{card}}</view>
						
					</view>
					<view class="syi-con">
						<view class="y-time">分组</view>
						<view class="y-text">{{boxinfo.group_name}}</view>
						
					</view>
					<view class="syi-con">
						<view class="y-time">NAT类型</view>
						<view class="y-text">NAT{{boxinfo.nat}}</view>
						
					</view>
					<view class="syi-con">
						<view class="y-time">磁盘使用空间</view>
						<view class="y-text">{{disk}}GB</view>
						
					</view>
					<view class="syi-con">
						<view class="y-time">磁盘总空间</view>
						<view class="y-text">{{total_disk}}GB</view>
						
					</view>
					<view class="syi-con">
						<view class="y-time">测速宽带</view>
						<view class="y-text">{{test}}Mbps</view>
						
					</view>
					<view class="syi-con">
						<view class="y-time">服务宽带</view>
						<view class="y-text">{{upload}}Mbps</view>
						
					</view>
					<view class="syi-con">
						<view class="y-time">出口IP</view>
						<view class="y-text">{{boxinfo.remote_ip}}</view>
						
					</view>
					<view class="syi-con">
						<view class="y-time">运营商</view>
						<view class="y-text">{{boxinfo.province}}{{boxinfo.isp}}</view>
						
					</view>
				</view>
			</view>
			
			<view class="foot">
				<view @tap="updateRemark()"><uni-icons type="compose" class="icon" size='30' color='#999999'></uni-icons><view>修改备注</view></view>
				<view @tap="removeGroup()"> <uni-icons type="trash" class="icon" size='30' color='#999999'></uni-icons> <view>移除设备</view> </view>
			</view>
			
			<view class="box" v-if="show"  @tap="coneal"></view>
			
			<view class="modal" v-if="show">
				<view class="title">
					备注修改
				</view>
				<view class="content1">
					<input type="text" v-model="newRemark">
				</view>
				<view class="btn-group">
					<view class="coneal" @tap="coneal">取消</view>
					<view class="submit" @tap="comfim">确认</view>
				</view>
			</view>
			
			<view class="box" v-if="show1"  @tap="coneal1"></view>
			<view class="modal1" v-if="show1">
				<view class="title">
					提示
				</view>
				<view class="content">
					确定要将设备移除吗！
				</view>
				<view class="btn-group">
					<view class="coneal" @tap="coneal1">取消</view>
					<view class="submit" @tap="comfim1">确认</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	var _self;
	var canvasObj = {};
	export default {
		data() {
			return {
				title:'',
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50,
				maxY:0,
				minY:0,
				id:'',
				boxinfo:[],
				test:'0',
				upload:'0',
				disk:'0',
				total_disk:'0',
				free_memory:'0',
				total_memory:'0',
				remark:'',
				date:1,
				Hour:1,
				r95:'',
				remarks:'',
				newRemark:'',
				show:false,
				clickId:0,
				lineData:[],
				show1:false,
				show2:true,
				show3:false,
				show4:false,
				card:'点击领取'
			}
		},
		onLoad(opthion) {
			_self = this;
			this.id = opthion.id
			this.remarks=opthion.remarks
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);
			//this.getBoxInfo(opthion.id)
		},
		onShow() {
			this.getBoxInfo(this.id)
		},
		onReady() {
			this.getLineInfo(1,1)
		},
		methods: {
			copySn(){
				uni.setClipboardData({
				    data: this.title,
				    success: function () {
				        uni.showToast({
				        	title: '内容已复制',
				        	icon:'none'
				        });
				    }
				});
			},
			showLineA(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 50, 0, 15],
					
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: false, //开启图表拖拽功能
					xAxis: {
						disabled:true,
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 5,
						scrollShow: false,
						scrollAlign: 'left',
						gridEval:100
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'none',
						splitNumber: 5,
						min: this.minY,
						max: this.maxY,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						lineStyle: 'straight'
					},
				});		
			},
			
			touchLineA(e) {
				canvasObj['canvasLineA'].scrollStart(e);
			},
			
			moveLineA(e) {
				canvasObj['canvasLineA'].scroll(e);
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			
			touchEndLineA(e) {
				canvasObj['canvasLineA'].scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			
			fillData(data) {
				this.serverData = data;
				this.tips = data.tips;
				let LineA = {
					categories: [],
					series: []
				};
				LineA.categories = data.LineA.categories;
				LineA.series = data.LineA.series;
				console.log(LineA)
				this.showLineA("canvasLineA", LineA);
			},
			
			getBoxInfo(id){
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getBoxInfo')({
					id:id
				}).then(res=>{
					// console.log(res.data)
					this.boxinfo = res.data
					this.test = parseFloat(res.data.test_bandwidth*8/1024).toFixed(2)
					this.upload = parseFloat(res.data.upload_bandwidth*8/1024).toFixed(2)
					this.disk = parseFloat(res.data.task_disk_size/1024).toFixed(2)
					this.total_disk = parseFloat(res.data.total_disk_size/1024).toFixed(2)
					this.free_memory = parseFloat(res.data.free_memory/1024).toFixed(2)
					this.total_memory = parseFloat(res.data.total_memory/1024).toFixed(2)
					this.title = res.data.name
					this.remarks = res.data.remark
					uni.hideLoading()
				})
			},
			
			getLineInfo(index,type){
				this.$api.interfaceApi('getLineInfo')({
					id:this.id,
					type:index,
					span:type
				}).then(res=>{
					this.maxY = res.data.max
					this.minY = res.data.min
					this.r95 = res.data.ri
					this.lineData = res.data.list
					console.log(res.data.list)
					console.log(res.data)
					_self.fillData(res.data.list);
				})
			},
					
			selectDate(index){
				switch (index) {
					case 1:
						this.date = 1;
						this.getLineInfo(1,this.Hour)
						break;
					case 2:
						this.date = 2;
						this.getLineInfo(2,this.Hour)
						break;
					case 3:
						this.date = 3;
						this.getLineInfo(3,this.Hour)
						break;
					case 4:
						this.date = 4;
						this.getLineInfo(4,this.Hour)
						break;
				}
			},
			
			selectHour(index){
				switch (index) {
					case 1:
						this.Hour = 1;
						this.getLineInfo(this.date,1)
						
						break;
					case 2:
						this.Hour = 2;
						this.getLineInfo(this.date,2)
						break;
				}
			},
			
			
			updateRemark(){
				this.clickId = this.id;
				this.show = true
				this.show2 = false
				this.show3 = false
				this.newRemark = this.remarks
			},
			//移除分组
			removeGroup(){
				this.show1 = true
				this.show2 = false
				this.show3 = false
			},
			
			receiveCard(){
				this.show1 = false
				this.show3 = true
				this.show2 = false
			},
			
			coneal1(){
				this.show1 = false
				this.show2 = true
				this.fillData(this.lineData)
			},
			coneal3(){
				this.show3 = false
				this.show2 = true
				this.fillData(this.lineData)
			},
			coneal4(){
				this.show4 = false
				this.show2 = true
				this.fillData(this.lineData)
			},
			comfim1(){
				this.$api.interfaceApi('removeGroup')({
					id:this.id
				}).then(res=>{
					this.show1 = false
					this.show2 = true
					uni.showToast({
						icon:'none',
						title:res.msg
					})
					this.fillData(this.lineData)
				})
			},
			comfim3(){
				this.$api.interfaceApi('receiveCard')({
					name:this.title
				}).then(res=>{
					this.card=res.data
				})
			},
			comfim4(){
				uni.setClipboardData({
				    data: this.card,
				    success: function () {
				        uni.showToast({
				        	title: '内容已复制',
				        	icon:'none'
				        });
				    }
				});
				this.show4 = false
				this.show2 = true
				this.fillData(this.lineData)
			},
			toMove(){
				uni.navigateTo({
					url:`/pages/equipment/move?id=${this.id}&gid=${this.boxinfo.gid}`
				})
			},
			comfim(){
				if(this.newRemark == ''){
					uni.showToast({
						title:"名称不能为空",
						icon:"none"
					})
					return
				}
				
				this.$api.interfaceApi('updateRemark')({
					'id':this.clickId,
					'remark':this.newRemark
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					if(res.code == 1){
						this.fillData(this.lineData)
						this.newRemark = ''
						this.show = false
						this.show2 = true
					}
				})
			},
			coneal(){
				this.newRemark = ''
				this.show = false
				this.show2 = true
				this.fillData(this.lineData)
			},
			
			
		}
	}
</script>

<style>
@import url("monitor.css");

</style>
